<template>
  <!-- 顶部标题栏 -->
  <PageHeader title="我的课程"/>
  <!-- tab栏 -->
  <view class="flex w-full bg-white sticky top-0 z-10">
    <view
        v-for="(tab, idx) in tabs"
        :key="tab"
        class="flex-1 text-center py-[24rpx] text-[30rpx] cursor-pointer transition-all"
        :class="[
        activeTab === idx
          ? 'text-blue-500 font-bold border-b-solid border-b-2 border-blue-500'
          : 'text-gray-500 font-normal border-b-solid border-b-2 border-gray-100'
      ]"
        @click="activeTab = idx"
    >
      {{ tab }}
    </view>
  </view>
  <!-- 内容区 -->
  <view class="p-[30rpx] min-h-[60vh]">
    <!-- 购买的课程列表 -->
    <view v-show="activeTab === 0">
      <templete v-if="purchasedCourses.length">
        <view
            v-for="item in purchasedCourses"
            :key="item.id"
            class="bg-white rounded-2xl shadow-md p-[30rpx] mb-[24rpx] flex flex-col gap-y-2"
            @tap="goDetail(item)"
        >
          <view class="course-name text-[32rpx] font-bold mb-[12rpx] line-clamp-1">{{ item.name }}</view>
          <view class="course-duration text-[#666] text-[26rpx] mb-[8rpx]">时长: {{ item.duration }}</view>
          <view class="course-price text-[#165DFF] text-[32rpx] font-bold">¥{{ item.price }}</view>
        </view>
      </templete>
      <view v-else class="text-center py-[100rpx] text-[#999] text-[28rpx]">暂无购买课程</view>
    </view>
    <!-- 发布的课程列表 -->
    <view v-show="activeTab === 1">
      <template v-if="publishedCourses.length">
        <view
            v-for="item in publishedCourses"
            :key="item.id"
            @tap="goRecorder(item)"
            class="bg-white rounded-2xl shadow-md p-[30rpx] mb-[24rpx] flex flex-col gap-y-2"
        >
          <view class="course-name text-[32rpx] font-bold mb-[12rpx] line-clamp-1">{{ item.name }}</view>
          <view class="course-duration text-[#666] text-[26rpx] mb-[8rpx]">时长: {{ item.duration }}</view>
          <view class="course-price text-[#165DFF] text-[32rpx] font-bold">¥{{ item.price }}</view>
        </view>
      </template>
      <view v-else class="text-center py-[100rpx] text-[#999] text-[28rpx]">暂无发布课程</view>
    </view>
  </view>
</template>

<script setup lang="ts">
import Taro from '@tarojs/taro'
import {ref} from 'vue'
import PageHeader from '@/components/PageHeader.vue'
import {post} from "@/utils/request";
import {number} from "unocss-preset-weapp/dist/utils";
import {duration} from "unocss-preset-weapp/theme";
//import console from 'console';
const allCourses = ref()
const page = ref(1)
const pageSize = 6
/**
 * 我的课程页面
 * @description 课程tab切换、列表展示，严格按设计稿和Cursor规则实现。
 * @performance 只渲染当前tab内容，列表用v-for+mock数据，移动端适配。
 */
query()
const filteredCourses = ref([] as typeof allCourses.value)
function query () {
  //查询参数
  const submitparam = {
    pageNo: 1,
    pageSize: 10
  }
  //获取购买的课程
  post("/training/mySignUp", submitparam).then(res => {
    purchasedCourses.value = res.data.map((item: CoursesItem) => ({
      id: item.columns.id,
      name: item.columns.title,
      //duration: item.columns.duration,
      price: item.columns.price,
      payStatus: item.columns.pay_status,
      status: item.columns.status
    }))
    //数据筛选和分页的处理逻辑，主要功能是根据活跃标签筛选课程列表
    /*let list = allCourses.value
    if (activeTab.value > 0) {
      list = list.filter(c => c.payStatus === tabs[activeTab.value])
    }
    filteredCourses.value = list.slice(0, page.value * pageSize)
    //noMore.value = filteredCourses.value.length >= list.length*/
  })
  //获取发布的课程
  //TODO：课时时长没有获取到
  post("/training/myRelease", submitparam).then(res => {
    publishedCourses.value = res.data.map((item: CoursesItem) => ({
      id: item.columns.id,
      name: item.columns.title,
      //duration: item.columns.duration,
      price: item.columns.price,
      payStatus: item.columns.pay_status,
      status: item.columns.status
    }))
    //console.log("获取到的发布的课程",publishedCourses.value)
  })
}
const tabs = ['我购买的', '我发布的']
const activeTab = ref(0)
interface submitParam {
  id: number,
  pageNo: number,
  pageSize: number,
  trainingId: number,
  payStatus: number,
  status: number
}

interface CoursesColumn {
  member_id:null,
  teachers_pic:null,
  sign_rate:null,
  teacher_name:null,
  member_number:null,
  teachers_introduction:null,
  create_time: number,
  pay_number:null,
  title:null,
  type:null,
  cycle_type:null,
  cycle:null,
  cover:null,
  update_time: null | number;
  pay_status:null,
  total_amount:null,
  price:null,
  progress:null,
  id: number,
  introduction:null,
  status:number
}

interface CoursesItem {
  columns: CoursesColumn;
  columnNames: string[];
  columnValues: (null | number | string)[];
}

// mock数据
const purchasedCourses = ref([
  {id: 1, name: 'JavaScript高级程序设计', duration: '36小时', price: '199.00'},
  {id: 2, name: 'Vue.js从入门到实战', duration: '24小时', price: '129.00'},
  {id: 3, name: 'React Native跨平台开发', duration: '30小时', price: '159.00'}
])
const publishedCourses = ref([
  {id: 1, name: 'HTML5与CSS3基础教程', duration: '20小时', price: '99.00'},
  {id: 2, name: 'Node.js后端开发', duration: '28小时', price: '149.00'}
])


const goDetail = (item: any) => {
  Taro.navigateTo({url: `/pages/webs/training?id=${item.id}`})
}

const goRecorder = (item: any) => {
  Taro.navigateTo({url: `/pages/course/recorder?id=${item.id}`})
}
</script>

<style scoped lang="scss">

</style>